import React from 'react'
import { Menu } from 'antd'
import {useModel} from '../store'
import { useHistory } from 'react-router-dom'
import {
  AppstoreOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;

export default ()=>{
    let [collapsed] = useModel('menuCollapsed')
    let history = useHistory()
    function goto(path){
        history.push(path)
    }

    return (
        <div className="ly-sidemenu">
            <Menu
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
            inlineCollapsed={collapsed}
            >
                <Menu.Item key="1" icon={<DesktopOutlined />} onClick={()=>goto('/dashbord')}>
                    dashbord
                </Menu.Item>
                <Menu.Item key="2" icon={<PieChartOutlined />} onClick={()=>goto('/request-demo')}>
                    hooks方式接口请求
                </Menu.Item>
                <Menu.Item key="3" icon={<PieChartOutlined />} onClick={()=>goto('/list-demo')}>
                   list-demo 
                </Menu.Item>
                <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                    <Menu.Item key="7">Option 7</Menu.Item>
                    <Menu.Item key="8">Option 8</Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
                    <Menu.Item key="9">Option 9</Menu.Item>
                    <Menu.Item key="10">Option 10</Menu.Item>
                    <SubMenu key="sub3" title="Submenu">
                    <Menu.Item key="11">Option 11</Menu.Item>
                    <Menu.Item key="12">Option 12</Menu.Item>
                    </SubMenu>
                </SubMenu>
            </Menu>

        </div>
    )
}